{extend name="./Template/Public/layout.html" /}
    {block name="title">Validation</block}
    {block name="headjs"}
        <script src="__JS__/bootstrap.min.js"></script>
        <script type="text/javascript">
            var courseCreatURL='{:Url("Home/Index/creatCourse","","")}',indexURL='{:Url("Home/Index/index","","")}';
        </script>
    {/block}
    {block name="css"}<link href="__CSS__/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">{/block}
{block name="content"}
<div id="wrapper">
     <!-- Navigation -->
        <div id="page-wrapper">
        <div class="col-md-12 graphs">
	   <div class="xs">
  	    <h3>新建课程</h3>
  	    <div class="well1 white" id="creatCourse">
            <form class="form-floating ng-pristine ng-invalid ng-invalid-required ng-valid-email ng-valid-url ng-valid-pattern" novalidate="novalidate" method="post">
          <fieldset>
            <div class="form-group">
              <label class="control-label">课程名：</label>
              <input type="text" v-on:focus="warn.name=0" name="coursename" v-model="course.name"  class="form-control1 " required="">
                <div v-show="warn.name" class="coursewarn alert alert-warning">警告！课程名不能为空。</div>
            </div>
            <div class="form-group">
                  <label class="control-label normal">课程日期：</label></br>
                  <input type="text" v-on:focus="warn.time_start=0" name="coursetime_start" v-model="course.course_time_start" class="form-control1 form_datetime_start"  style="width: 30%"  placeholder="单击此处设置课程开始时间">-
                  <input type="text" v-on:focus="warn.time_end=0" v-on:onchange="checkendtime"  name="coursetime_end" v-model="course.course_time_end" class="form-control1 form_datetime_end" data-date="{{coursetime_start}}"  style="width: 30%"  placeholder="单击此处设置课程结束时间">
                  <div v-show="warn.time_start||warn.time_end"  class="alert alert-warning" >警告！课程时间不能为空。</div>
                  <div hidden  class="alert alert-warning warntime" >警告！结束时间不能小于开始时间。</div>
            </div>
             <div class="form-group">
                  <label class="control-label">主会场：</label>
                  <input type="text" v-on:focus="warn.place=0" name="courseplace" v-model="course.course_place"  class="form-control1 " required="">
                  <div v-show="warn.place" class="coursewarn alert alert-warning">警告！主会场不能为空。</div>
             </div>
              <div class="form-group">
                  <label class="control-label">主讲人：</label>
                  <input type="text" v-on:focus="warn.speaker=0"  v-model="course.course_speaker"  class="form-control1 " required="">
                  <div v-show="warn.speaker" class="coursewarn alert alert-warning">警告！主讲人不能为空。</div>
              </div>
            <div class="form-group">
              <button type="button" v-on:click="check_null" class="btn btn-primary">Submit</button>
              <button type="reset" class="btn btn-default">Reset</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
   </div>
      </div>
      <!-- /#page-wrapper -->
   </div>
    <!-- /#wrapper -->
{/block}
{block name="bodyjs"}
    <script src="__JS__/home/creatcourse.js"></script>
    <script type="text/javascript" src="__JS__/home/bootStrap/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="__JS__/home/bootStrap/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
        function fillZero(v){
            if(v<10){v='0'+v;}
            return v;
        }
        function getLocalTime(nS) {
            var d = new Date();
            d.setTime(nS);
            var Y,M,D,H,I,S;
            Y=d.getFullYear();
            M=fillZero(d.getMonth()+1);
            D=fillZero(d.getDate());
            H=fillZero(d.getHours());
            I=fillZero(d.getMinutes());
            S=fillZero(d.getSeconds());
            return Y+'-'+M+'-'+D+' '+H+':'+I+':'+'00';
        }
        $('.form_datetime_start').datetimepicker({
            format:'yyyy-mm-dd hh:ii',
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        $('.form_datetime_start').datetimepicker().on('changeDate', function(ev){
            var q=getLocalTime(ev.date.valueOf());
            $('.form_datetime_end').val(q).datetimepicker('setStartDate', q).datetimepicker('update').val('');
                });
        $('.form_datetime_end').datetimepicker({
            format:'yyyy-mm-dd hh:ii',
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 1,
            minView: 0,
            forceParse: 0,
            showMeridian: 1
        });
        $('.form_datetime_end').click(function(){
            $('.warntime').hide();
        });
        $('.form_datetime_end').datetimepicker().on('changeDate', function(ev){
            var q=ev.date.valueOf(),t=Date.parse($('.form_datetime_start').val());
            var m=q<t;
            if(m){
                $('.warntime').show();
            }
        });
    </script>
{/block}
</html>
